<script>
export default {
  name: "detail",
  data() {
    return {
      detail: {
      },
      giftSendItem: {

      },
      codeShow: false,
      id: '',
    }
  },
  onLoad({ id }) {
    this.id = id
    this.getDetail()
  },
  methods: {
    getDetail() {
      this.$api.giftDetail({
        id: this.id
      }).then(res => {
        this.giftSendItem = res
        this.detail = {
          ...res.gift,
          image: this.$baseUrl + res.gift.image,
          remark: res.gift.remark.replace('"/public/uploads/file/', `"${this.$baseUrl}/public/uploads/file/`)
        }
      })
    },
    getGift() {
      this.$api.getGift({
        id: this.giftSendItem.id,
        is_get: 0
      }).then(res => {
        this.giftSendItem.is_get = 0
        this.getDetail()
        this.$u.toast('领取成功')
      })
    },
    copy() {
      uni.setClipboardData({
        data: this.giftSendItem.code,
        success: function () {
          uni.showToast({
            title: '复制成功',
            icon: 'none'
          });
        }
      });
    }
  }
}
</script>


<template>
  <div>
    <div class="detail-image">
      <u-image :src="detail.image" :height="500" mode="aspectFit"></u-image>
    </div>
    <u-line ></u-line>

    <div class="detail-box">
      <view class="demo-title">
        {{detail.name}}
      </view>
      <view style="display: flex;align-items: center;justify-content: space-between">
        <view class="demo-count">
          销量 {{detail.sale_count}}，收藏 {{ detail.collect_count }}
        </view>
      </view>
      <view>

      </view>
      <u-gap height="20"></u-gap>
      <u-line ></u-line>
      <u-gap height="20"></u-gap>
      <u-section :font-size="36"  :show-line="false" title="商品介绍" :right="false"></u-section>
      <u-gap height="20"></u-gap>

      <u-line ></u-line>
    </div>

    <u-parse :html="detail.remark"></u-parse>
    <div class="goods-action">
      <div class="goods-btn1" v-if="giftSendItem.is_get === 1" @click="getGift">领取</div>
      <div class="goods-btn1" v-if="giftSendItem.is_get === 0" @click="codeShow = true">查看兑换码</div>
    </div>
    <u-modal v-model="codeShow" confirm-text="确认" title="查看兑换码" @click="copy">
      <div style="line-height: 80px;text-align: center">{{ giftSendItem.code }}</div>
    </u-modal>
  </div>
</template>

<style scoped lang="scss">
.goods-action {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 120rpx;
  display: flex;
  align-items: center;
  background-color: #FFFFFF;
  color: #FFFFFF;
  .goods-icon {
    position: relative;
    font-size: 28rpx;
    color: #646566;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
    img {
      height: 36rpx;
      margin: 0 auto 2px;
    }
  }
  .goods-btn1 {
    width: 100%;
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(to right, #ffd01e, #ff8917);
    box-sizing: border-box;
    margin: 0 20px;
  }
  .goods-btn2 {
    margin: 0 20px;
    box-sizing: border-box;
    width: 100%;
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(to right, #a4a3a0, #e1d9d0);
  }
}
.detail-image {
  background-color: #ffffff;
}
.detail-box {
  padding: 20rpx;
  background-color: #ffffff;
}
.demo-title {
  font-size: 30rpx;
  margin-top: 5px;
  color: $u-main-color;
}

.demo-tag {
  display: flex;
  margin-top: 5px;
}

.demo-tag-owner {
  background-color: $u-type-error;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  padding: 10rpx 14rpx;
  border-radius: 50rpx;
  font-size: 24rpx;
  line-height: 1;
}

.demo-tag-text {
  border: 1px solid $u-type-primary;
  color: $u-type-primary;
  margin-left: 10px;
  border-radius: 50rpx;
  line-height: 1;
  padding: 4rpx 14rpx;
  display: flex;
  align-items: center;
  border-radius: 50rpx;
  font-size: 20rpx;
}

.demo-price {
  font-size: 48rpx;
  color: $u-type-error;
  margin-top: 5px;
}
.demo-count {
  font-size: 28rpx;
  color: $u-type-info;
  margin-top: 5px;
}

</style>